<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <link rel="stylesheet" href="css/chat.css">
</head>

<body>
    <section id="chat">
        <div class="chatBody">
            
            
        </div>
        <div><img src="images/icon.jpg"></div>
        <textarea class="chatText"></textarea>
        <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
    </section>
</body>
<script src="../../lib/font/jquery.min.js"></script>
<script>
    //预先定义一个会员数组
    //方便随机抽取
    let members = [
        {
            username :'张三',
            avatar :'head01.jpg'
        },
        {
            username :'李四',
            avatar :'head02.jpg'
        },
        {
            username :'王五',
            avatar :'head03.jpg'
        }
    ]

    $(function () {
        $("#send").click(function () {
            //获取输入框内容
            let msg = $(".chatText").val();
            // 随机抽取一名会员信息
            let index = parseInt(Math.random()*members.length);
            let member =members[index];

            // 拼接聊天信息
            let item = `
                <div class="msg">
                    <img src="./images/${member.avatar}" alt="">
                    <p>${member.username}</p>
                    <p>${msg}</p>
                </div>
            `;

             // 将拼接好的聊天信息，设置到聊天窗口
            let html = $('.chatBody').html();
            html +=item;
            $('.chatBody').html(html);

            // 清空输入框
            $(".chatText").val();

    });

});




</script>

</html>